<template>
  <div class="app-container">
    <div>
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="业务部门" prop="officeId">
          <el-cascader
            placeholder="请选择"
            clearable
            v-model="queryParams.officeId"
            :options="this.dept"
            :show-all-levels="false"
            :props="{ value: 'id',checkStrictly: true,emitPath:false,leaf : 'leaf' }"
            filterable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="系统名称" prop="projectName">
          <el-input v-model="queryParams.projectName" placeholder="请输入系统名称" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <!-- <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
            <el-option label="全部" value="" />
            <el-option label="否" value="0" />
            <el-option label="是" value="1" />
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="showAdd('xc')">
            信创变更资源
          </el-button>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="showAdd('noXc')">
            非信创变更资源
          </el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
      <el-table v-loading="loading" :data="demoList" style="width: 100%">
        <el-table-column label="系统名称" prop="cloudUpName" />
        <el-table-column label="业务部门" prop="officeName" />
        <el-table-column label="是否信创" prop="isXC">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.isXc == true" type="danger" effect="plain">信创</el-tag>
                <el-tag v-else type="info" effect="plain">非信创</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="云服务商" prop="cloudSupplierName" />
        <el-table-column label="状态" prop="bpmStatus" />
        <el-table-column label="发起人" prop="createByName" />
        <el-table-column label="申请时间" prop="createTime" />
        <el-table-column label="更新时间" prop="updateTime" />
        <el-table-column label="操作" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-search" @click="showDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
  </div>
</template>

<script>
  import {
    apply,
    listByCode,
    serviceByClazz,
  } from "@/api/resources/apply";
  import {
    resourcesChangeList
  } from "@/api/resources/change";
  import {
    treeselect
  } from "@/api/system/dept";
  import {
    getDicts
  } from "@/api/system/dict/data";
  import {
    addCloudUp
  } from "@/api/cloud/cloud";
  import {
    uploadFile
  } from "@/api/system/upload.js";
  import request from "@/utils/request";

  export default {
    name: "list",
    components: {

    },
    data() {
      return {
        // 遮罩层
        loading: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 示例Demo表格数据
        demoList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          officeId: null,
          projectName: null,
          status: "",
        },
        dept : [],
        //配置
        // configure:JSON.parse(sessionStorage.getItem('configure')),
      };
    },
    watch: {
      $route(route) {
        if (route.fullPath == '/resources/change') {
          this.getList();
        }
      },
    },
    created() {
      this.getList();
      this.getListDept();
      // this.getDataOfAdd();
    },
    methods: {
      //查看详情
      showDetail(item) {
        if(item.isXc){
          this.$router.push("/resources/changes/detail/" + item.id);
        }else{
          this.$router.push("/resources/changes/detailNoXc/" + item.id);
        }

      },
      //部门列表
      getListDept() {
        treeselect({}).then((response) => {
          this.dept = response.data;
        });
      },
      //申请弹窗
      showAdd(type) {
        if(type == 'xc'){
          this.$router.push("/resources/changes/add");
        }else{
          this.$router.push("/resources/changeNoXc/add");
        }
      },
      //获取一些配置数据
      getDataOfAdd() {
        //可用域
        getDicts("available_domain").then((response) => {
          this.configure.available_domain = response.data;
        });
        //服务商
        getDicts("cloud_service_provider").then((response) => {
          this.configure.cloud_service_provider = response.data;
        });
        //盘类型
        serviceByClazz({
          code: "cc"
        }).then((response) => {
          response.data.forEach((item) => {
            if (
              ["FCcc(tykcc)2", "FCcc_ssd", "spycc2"].indexOf(
                item.code
              ) < 0
            ) {
              this.configure.storage_type.push(item);
            }
            if (["spycc2"].indexOf(item.code) < 0) {
              this.configure.ccList.push(item);
            }
            if (
              ["fbscc_wjcc2", "FCcc(tykcc)2", "FCcc_ssd"].indexOf(
                item.code
              ) < 0
            ) {
              this.configure.fwcpList.push(item);
            }
          });
        });
        //操作系统
        serviceByClazz({
          code: "czxt"
        }).then((response) => {
          this.configure.czxtList = response.data;
        });
        //云服务器规格列表
        listByCode("spec_ecs").then((response) => {
          this.configure.codeList = response.data;
        });
        //高性能服务器资源类型列表
        serviceByClazz({
          code: "wlfwq"
        }).then((response) => {
          this.configure.wlfwqList = response.data;
        });
        //数据库类型列表
        serviceByClazz({
          code: "sjk"
        }).then((response) => {
          this.configure.sjkList = response.data;
        });
        //安全产品列表
        serviceByClazz({
          code: "yyaq"
        }).then((response) => {
          this.configure.yyaqList = response.data;
        });
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        resourcesChangeList(this.queryParams)
          .then((response) => {
            this.demoList = response.rows;
            this.total = response.total;
            this.loading = false;
          })
          .then(() => {});
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams.officeId = null
        this.queryParams.projectName = ''
        this.handleQuery();
      },
    },
  };
</script>
<style lang="scss" scoped>
  .el-table{
      color: #000;
  }
</style>
